<template>
  <view class="blog-wrapper" @longpress.stop="removePost" @tap="toPostDetail(post,$event)">
    <view>
      <view class="top">
        <view  @tap.stop="toUserInfo"  class="top-left">
          <u-avatar class="avatar" :src="post?.authorUrl">
          </u-avatar>
          <text class="nick-name">
            {{ checkParam(post.authorName) }}
          </text>
        </view>
      </view>
      <view class="content" >
        <view>
          <u-read-more
              :color="'#000'"
              openText="收起" toggle color="#a1a4a6"
              closeText="展开" :shadowStyle="shadowStyle"
              textIndent="0"
              showHeight="80" ref="uReadMore">
            <rich-text style="color:#000;" :nodes="checkParam(post.title,$event)"></rich-text>
<!--            <u-parse :tag-style="tagStyle" :content="checkParam(post.title,$event)" @load="load"></u-parse>-->
          </u-read-more>
          <u-grid  :border="false">
            <u-grid-item v-for="(item,index) in fileList"
                         :key="index"
                         @tap.stop="sendFileList(index)" >
              <view>
                <image v-if="isImageUrl(item)"
                       class="file-item-multi"
                       lazy-load
                       mode="aspectFill"
                       :src="item">
                  <template v-slot:loading>
                    <up-loading-icon></up-loading-icon>
                  </template>
                  <template #error>
                    <view style="font-size: 24rpx;">加载失败</view>
                  </template>
                </image>
                <video v-if="isVideoUrl(item)"
                       object-fit="cover"
                       style="position: relative;"
                       :enable-progress-gesture="false"
                       :vslide-gesture-in-fullscreen="false"
                       :show-fullscreen-btn="false"
                       :show-center-play-btn="false"
                       :show-play-btn="false"
                       class="file-item-multi" :src="item">
                  <cover-image
                      class="play-btn"
                      src="https://www.douluodalu.icu:9000/school/static/play_white.png">
                  </cover-image>
                </video>
              </view>

            </u-grid-item>
          </u-grid>
        </view>

        <view  @tap.stop="toPostByChannel" class="topic-wrapper">
          <view class="topic">#</view>&nbsp;
          <text style="color: black;font-weight: bolder;font-size: 12px">{{ checkParam(post.channelName) }}~</text>
        </view>
        <view class="btn-wrapper">
          <view style="display: flex;align-items: center">
            <image  class="btn-img" src="https://www.douluodalu.icu:9000/school/static/share.png"></image>
            &nbsp;<text>&nbsp;分享</text>
          </view>
          <view style="display: flex;align-items: center">
            <image class="btn-img" src="https://www.douluodalu.icu:9000/school/static/comment.png"></image>
            <text >&nbsp;{{checkParam(post.comment)}}</text>
          </view>
          <view style="display: flex;align-items: center">
            <image @tap.stop="likePost()" class="btn-img" :src="!post.isLiked ? 'https://www.douluodalu.icu:9000/school/static/like.png' : 'https://www.douluodalu.icu:9000/school/static/like_active.png'"></image>
            <text>&nbsp;{{ checkParam(post.likes) }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>

import {likePost} from "@/api/post";
import {getToken} from "@/utils/auth";

export default {
  props: ['post'],
  data() {
    return {
      videoContext: null,
      fileList: [],
      current: 0,
      tagStyle: {
        p: 'color: #000; line-height: 24px;'
      },
      shadowStyle: {
        backgroundImage: "none",
        paddingTop: "0",
        marginTop: "20rpx"
      },
      showHeight: 200,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        authorName: null,
        channelId: null,
        labels: null,
        countyId: null,
        createdTime: null,
        publishTime: null,
        origin: null,
      },
      isToPostDetailClicked: false,
      isSendFileListClicked: false
    }
  },
  mounted() {
    if (this.post.videos != null) {
      let videoList = this.post.videos.split(',');
      this.fileList = [...this.fileList, ...videoList]
    }
    if (this.post.images != null) {
      let imageList = this.post.images.split(',');
      this.fileList = [...this.fileList, ...imageList]
    }
  },
  created() {
  },
  methods: {
   async likePost(){
     let token = getToken();
     if(!(token !== null && token !== ''&& token !== undefined)){
       uni.navigateTo({url: '/pages/my/login'})
       return;
     }
     const res =  await likePost(this.post.id)
     this.post.isLiked ? this.post.likes-- : this.post.likes++
     this.post.isLiked = !this.post.isLiked
    },
    toFullScreen() {
      uni.navigateTo({
        url: "/pages/index/fullScreen"
      })
    },
    toPostDetail(post,event){
      event.stopPropagation()
      event.preventDefault()
      uni.navigateTo({
        url: '/pages/comment/index?id=' + post.id
      })
    },
    sendFileList( currentIndex,event) {
      // event.stopPropagation()
      // event.preventDefault()
      this.toFullScreen()

      setTimeout(() => {
        uni.$emit('sendFileList', {
          post: this.post,
          fileList: this.fileList,
          currentIndex: currentIndex
        })
      }, 500)

    },
    isImageUrl(url) {
      const dotIndex = url.lastIndexOf(".");
      // 截取路径的扩展名
      const extension = url.substring(dotIndex);
      // 判断扩展名是否是图片扩展名
      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tif', '.tiff'];
      // console.log(url+'----后缀：'+ extension +'----->  '+imageExtensions.includes(extension))
      return imageExtensions.includes(extension) && url.startsWith("http");
    },
    isVideoUrl(url) {
      const dotIndex = url.lastIndexOf(".");
      // 截取路径的扩展名
      const extension = url.substring(dotIndex);
      // 判断扩展名是否是图片扩展名
      let videoExtensions = [".3gp", ".avi", ".flv", ".mkv", ".mov", ".mpg", ".mp4", ".rmvb", ".wmv"];
      // console.log(url+'----后缀：'+ extension +'----->  '+imageExtensions.includes(extension))
      return videoExtensions.includes(extension) && url.startsWith("http");
    },
    toPostByChannel(){
      uni.navigateTo({
        url: '/pages/topic/topicByChannel?id=' + this.post.channelId
      })
    },
    toUserInfo(){
      uni.navigateTo({
        url: '/pages/my/userInfo?id=' + this.post.authorId
      })
    },
    checkParam(value) {
      if (value === '' || value === undefined || value === null) {
        if (typeof value === 'number') {
          return 0;
        }
        if (typeof value === 'string') {
          return '无';
        }
      } else {
        return value;
      }
    },
    click(name) {
      this.$refs.uToast.success(`点击了第${name}个`)
    },
    load() {
      this.$refs.uReadMore.init();
    }
  }
}
</script>
<style>
.btn-wrapper {
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.btn-img {
  font-weight: bolder;
  font-size: 14px;
  color: black;
  height: 20px;
  width: 20px;
}

.topic-wrapper {
  display: flex;
  align-items: center;
  width: max-content;
  height: 15px;
  padding: 5px;
  border-radius: 50px;
  background-color: rgba(78, 164, 249, 0.17);
}

.topic {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  padding: 2px;
  width: 15px;
  height: 15px;
  color: white;
  border-radius: 50%;
  background-color: #4ea4f9
}

.image-wrapper {
  padding: 4px 0;
}

.top {
  display: flex;
  align-items: center;
}

.custom-style {
  border: none;
  width: 60rpx;
  height: 60rpx;
  color: black;
  padding-right: 34px;
  scale: 0.5;
}

.content {

}

.top-left {
  display: flex;
  align-items: center;
}

.nick-name {
  font-size: 20rpx;
  color: #555555;
  font-style: initial;
  padding-left: 20rpx;
}

.avatar {
  border-radius: 50%;
  height: 80rpx;
  width: 80rpx;
}

.blog-wrapper {
  border-bottom: 3px solid #f0f0f0;
  width: 100%;
  height: auto;
}

image {
  will-change: transform
}

.file-item-multi {
  margin-bottom: 0.5rem;
  border-radius: 10px;
  width: 7.5rem;
  height: 7.5rem;
  position: relative;
}

.file-item-multi-1-row {
  border-radius: 5px;
  width: 7.5rem;
  height: 7.5rem;
}

.file-item-multi-1-col {
  margin-bottom: 5px;
  border-radius: 5px;
  width: 7.5rem;
  height: 7.5rem;
}

.file-item-multi-4 {
  border-radius: 5px;
  width: 7.5rem;
  height: 7.5rem;
}

.play-btn {
  width: 40px;
  height: 40px;
  top: 30%;
  left: 30%;
  position: absolute
}
</style>
